<template>
	<!-- 主治医师界面 -->
	<view class="content">
		<!-- <u-card :full="true" :border="false" :border-radius="0" :head-border-bottom="false" :foot-border-top="false"> -->
		<!-- 用户头像信息 -->
		<view class="card user_staff">
			<view class="photo">
				<u-avatar size="130" src="http://www.520touxiang.com/uploads/allimg/2018122414/iseyl22xdva.jpg"></u-avatar>
				<view class="info">
					<view class="username">霍莉</view><br>
					<view class="section">新生儿科 主治医师</view>
					<view class="hospital">太原市妇幼保健院</view>
				</view>
				<u-button class="custom-style" type="default" size="mini" shape="circle">关注</u-button>
			</view>
			<u-grid col="3" :border="false">
				<u-grid-item>
					<view class="title">10年</view>
					<view class="desc">从业年限</view>
				</u-grid-item>
				<u-grid-item>
					<view class="title">1901次</view>
					<view class="desc">回答次数</view>
				</u-grid-item>
				<u-grid-item>
					<view class="title">{{value}}分</view>
					<u-rate :count="count" v-model="value" :disabled="true"></u-rate>
				</u-grid-item>
			</u-grid>
			<u-grid col="3" :border="false">
				<u-grid-item class="u-grid-item">
					<view style="display: flex;vertical-align: middle; font-size: 24rpx;">
						<custom-icons type="renzheng" size="16" style="color: #ffc300;"></custom-icons>
						<view>平均响应：1小时</view>
					</view>
				</u-grid-item>
				<u-grid-item>
					<view style="display: flex;vertical-align: middle;font-size: 24rpx;">
						<custom-icons type="renzheng" size="16" style="color: #ffc300;"></custom-icons>
						<view>三甲医院</view>
					</view>
				</u-grid-item>
				<u-grid-item>
					<view style="display: flex;font-size: 24rpx;">
						<custom-icons type="renzheng" size="16" style="color: #ffc300;"></custom-icons>
						<view>医师认证</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 擅长疾病 -->
		<view class="card card2">
			<view class="headline">
				<u-section title="擅长疾病" :show-line="false" :right="false"></u-section>
			</view>
			<view class="btns">
				<u-button class="btn" shape="circle" size="mini">黄疸</u-button>
				<u-button class="btn" shape="circle" size="mini">炎症</u-button>
				<u-button class="btn" shape="circle" size="mini">哭闹</u-button>
				<u-button class="btn" shape="circle" size="mini">挑食</u-button>
			</view>
			<u-line />
			<view class="headline">
				<u-section title="个人简介" :show-line="false" :right="false"></u-section>
			</view>
			<view class="desc">
				<text>儿科学硕士，三甲妇幼保健院儿科工作9年，擅长肺炎、黄疸、早产儿发育、哭闹、咳嗽等治疗。</text>
			</view>
			
			<u-line />
			
			<view class="headline">
				<u-section title="" :show-line="false" sub-title="更多医生详细信息"></u-section>
			</view>
		</view>
		<!-- 医院信息 -->
		<u-card :full="true" :border="false" :border-radius="0" :head-border-bottom="false" :foot-border-top="false">
			<view slot="head">
				<u-section title="医院信息" :show-line="false" :right="false"></u-section>
			</view>
			<view slot="body" >
				<view style="display: flex;margin-bottom: 18rpx;">
					<custom-icons type="yiyuan" size="16" style="color: #37afb7;"></custom-icons>
					<u-section title=" 太原市妇幼保健院" sub-title="" :show-line="false"></u-section>
				</view>
				<view>
					<u-button shape="circle" size="mini" style="color: #00baad;margin-right: 15rpx;">三甲医院</u-button>
					<u-button shape="circle" size="mini" style="color: #00baad;margin-bottom: 15rpx;">医保</u-button>
				</view>
				<u-line/>
				<view style="display: flex;margin-top: 18rpx;">
					<custom-icons type="dianhua" size="16" style="color: #37afb7;"></custom-icons>
					<u-section title="联系电话" sub-title="0377-283789" :show-line="false"></u-section>
				</view>
			</view>
		</u-card>
	</view>
</template>

<script>
	import footMenuList from '@/components/uni-list-item/foot-menu-list.vue' //底部菜单
	export default {
		data() {
			return {
				value: 5.0, //选中的星星数量
				count: 5 ,//最多可选的星星个数
				menuList: [
					{
						title: '太原市妇幼保健院',
						extraIcon: {
							color: '#383838',
							size: '22',
							type: 'geren'
						}
					},{
						title: '联系电话',
						extraIcon: {
							color: '#383838',
							size: '25',
							type: 'kafei'
						}
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.content {
		margin: 0;
		padding: 0;
		background-color: #faf8f8;

		.card {
			background-color: #FFFFFF;
			margin-bottom: 20rpx;
		}
		.card2{
			padding-left: 15rpx;
			padding-top: 15rpx;
			.btns{
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				.btn{
					margin-right: 15rpx;
				}
			}
			
			.headline{
				margin-top: 15rpx;
			}
			.desc{
				margin-top: 10rpx;
				margin-bottom: 10rpx;
				font-size: 24rpx;
				margin-top: 4rpx;
				color: $u-type-info;
			}
		}

		.user_staff {

			.photo {
				background-color: #00baad;
				height: 200rpx;
				padding: 25rpx 50rpx;
				// padding-top: 20rpx;
				color: white;
				font-size: 12px;
				display: flex;

				.info {
					margin-left: 15rpx;

					.username {
						font-size: 16px;
						font-weight: bold;
					}

					.section {
						margin-top: -35rpx;
					}

				}
			}

			.custom-style {
				margin-right: -25rpx;
				color: #FFFFFF;
				background-color: #00baad;
			}

			.title {
				font-weight: bold;
			}

			.desc {
				font-size: 24rpx;
				margin-top: 4rpx;
				color: $u-type-info;
			}
		}
	}
</style>
